/**
    2023/3/9
    填写订单信息页面

*/

<template>
    <div>
        <!--头部区域-->
        <PageHeader />

        <!--导航区域-->
        <PageNav />

        <!--内容区域-->
        <div class="list">
            <div class="box">
                <div class="detail">
                    <!--1、收件人信息-->
                    <div>
                        <el-row :gutter="20" style="font-size:10px;">
                            <el-col :span="6" v-for="(o, index) in addressData" :key="index">
                                <el-card class="box-card" @click.native="eventAddress(o, index)">
                                    <div :class="{ 'address-selected': addressSelectedIndex == index }">
                                        <div>姓名：{{ o.name }}</div>
                                        <div>电话：{{ o.phone }}</div>
                                        <div>地址：{{ o.address }}</div>
                                    </div>
                                    <div class="box-card-opt">
                                        删除 | 修改
                                    </div>
                                </el-card>

                            </el-col>
                            <el-col :span="6">
                                <el-card class="box-card">

                                    <el-button type="text" @click="dialogAddressEdit">添加新地址 Dialog</el-button>
                                </el-card>
                            </el-col>
                        </el-row>


                    </div>

                    <!--2、配送时间-->
                    <div></div>

                    <!--3、支付方式-->
                    <div></div>

                    <!--4、发票信息-->
                    <div></div>

                    <!--5、商品信息-->
                    <div></div>

                    <!--6、金额信息-->
                    <div></div>

                    <!--7、提交按钮-->
                    <div></div>

                </div>
            </div>
        </div>
        
        <!--底部区域-->
        <PageFooter />

        <!--dialog-->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="收件人姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="收件人电话" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="收件人城市" :label-width="formLabelWidth">
                    <!--当你后台的数据格式和官网options的数据格式不一样时，需要用props指定-->
                    <el-cascader v-model="form.city" :options="options"  @change="cityChange"></el-cascader>
                </el-form-item>
                <el-form-item label="收件人地址" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                    <el-checkbox v-model="checked">是否默认地址</el-checkbox>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="eventSubmitAddress">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'
export default {
    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav, PageHeader, PageFooter
    },
    data() {
        return {
            
            //地址模块
            checked:true,
            addressData: [
                { id: '1', name: 'lcg', address: '上海市某个小区', phone: '123456789' },
                { id: '2', name: 'pdeu', address: '上海市某个小区', phone: '123456789' },
                { id: '3', name: 'tomx', address: '上海市某个小区', phone: '123456789' },
                { id: '4', name: 'afloxos', address: '上海市某个小区', phone: '123456789' },
                { id: '5', name: 'afasfdas', address: '上海市某个小区', phone: '123456789' },
                { id: '6', name: 'afadsfa', address: '上海市某个小区', phone: '123456789' },
            ],
            addressSelectedIndex: 4,
            addressSelectedId: 0,
            dialogFormVisible: false,
            form: {
                name: '',
                phone: '',
                city: '',
                address: ''
            },
            options: [],
            // props:{
            //     value:'id',
            //     label:'name',
            //     children:'items'
            // },
            formLabelWidth: '120px'

        }
    },
    mounted(){
        this.onloadAddress()
    },
    methods: {
        //页面加载的时候，加载该用户的地址信息
        onloadAddress(){
            let url='http://localhost:5217/api/MemberAddress/address'
            this.$http.get(url,{params:{
                memberId:'d7dfed63-aa17-4ade-22a8-08db192c1f71'
            }}).then(res=>{
                this.addressData = res.data.data
            })
        },
        //弹出地址编辑对话框
        dialogAddressEdit(){
                this.dialogFormVisible = true

                //加载级联
                let url=this.$baseUrl+'api/cityinfo'
                this.$http.get(url).then(res=>{
                    console.log(res)
                    this.options = res.data.data
                })
            },
        //城市级联选择事件
        cityChange(value) {
            console.log(value);
        },
        //地址弹出框的确认按钮事件
        eventSubmitAddress() {
            this.dialogFormVisible = false
            //获取表单中的数据
            //将表单中的数据提交到后台
            // let url =this.$baseUrl +' api/member/address'
            // let data={}
            // this.$http.post(url,data).then(res=>{
            //     //刷新地址列表数据
            //     this.addressData = res.data.data
            // })


            this.addressData.push({ id: '7', name: this.form.name, address: '上海市某个小区', phone: '123456789' })
        },
        //卡片的单击事件
        eventAddress(row, index) {
            this.addressSelectedIndex = index

            //获取选中地址的id,在提交订单的时候会用到
            this.addressSelectedId = row.id
            //this.$message(row.id)
        }
    }
}
</script>

<style>
.box-card {
    cursor: pointer;
}

.address-selected {
    background-color: bisque;
}
</style> */